import { Component, OnInit, Input, ChangeDetectionStrategy, Output, EventEmitter, ContentChild, TemplateRef } from '@angular/core';
import { fadeAnimation } from '../shared/animation/index';



@Component({
  selector: 'el-alert',
  animations: [fadeAnimation],
  templateUrl: './alert.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AlertComponent implements OnInit {

  @ContentChild('title') titleTmp!: TemplateRef<any>;
  //标题
  @Input() title: string = '';
  //主题 success/warning/info/error
  @Input() type: string = '';
   //辅助性文字。也可通过默认 slot 传入
   @Input() description: string = '';
   //文字是否居中
  @Input() center: boolean = false;
 //是否可关闭
  @Input() closable: boolean = false;
  //关闭按钮自定义文本
  @Input('close-text') closeText: string = '';
  //选择提供的主题 light/dark
  @Input() effect: string = 'light';
  //是否显示图标
  @Input('show-icon') showIcon: boolean = true;
  @Output() close: EventEmitter<Event> = new EventEmitter();
  
  visible: boolean = true;

  ICON_CLASS_MAP: any = {
    'success': 'el-icon-success',
    'warning': 'el-icon-warning',
    'error': 'el-icon-error',
    'info': 'el-icon-info',
  };
  constructor() { }

  ngOnInit(): void {
  }


  makeIconClass() {
    const base: string = this.ICON_CLASS_MAP[this.type] || 'el-icon-info';
    const isBig: string = this.description ? ' is-big' : '';
    return base + isBig;
  }

  makeTitleClass() {
    return this.description  ? ' is-bold' : '';

  }

  clickHandle(event: any) {
    this.visible = false;
    this.close.emit(event);
  }
}
